import Vue from 'vue';

// 创建一个简单的弹窗组件
const DialogComponent = Vue.extend({
  template: `
    <transition name="fade">
      <div class="dialog-overlay" v-if="visible" @click="closeOnMaskClick ? close() : null">
        <div class="dialog" :class="type">
          <div class="dialog-icon">
            <i v-if="type === 'success'" class="icon-success">✓</i>
            <i v-else-if="type === 'error'" class="icon-error">✕</i>
            <i v-else class="icon-info">i</i>
          </div>
          <div class="dialog-content">
            <h3 class="dialog-title">{{ title }}</h3>
            <p class="dialog-message">{{ message }}</p>
          </div>
          <button class="dialog-btn" @click="close">{{ buttonText }}</button>
        </div>
      </div>
    </transition>
  `,
  data() {
    return {
      visible: false,
      title: '提示',
      message: '',
      type: 'info',
      buttonText: '确定',
      closeOnMaskClick: true,
      resolve: null
    };
  },
  methods: {
    close() {
      this.visible = false;
      
      // 在过渡动画结束后移除DOM元素
      setTimeout(() => {
        if (this.$el && this.$el.parentNode) {
          this.$el.parentNode.removeChild(this.$el);
        }
        this.$destroy();
        
        // 完成Promise
        if (this.resolve) {
          this.resolve();
          this.resolve = null;
        }
      }, 300);
    },
    
    // 显示弹窗
    show(options = {}) {
      // 合并选项
      Object.assign(this, options);
      this.visible = true;
      
      // 创建一个Promise，在弹窗关闭时完成
      return new Promise(resolve => {
        this.resolve = resolve;
      });
    }
  }
});

// 添加样式
const style = document.createElement('style');
style.textContent = `
  .dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .dialog {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .dialog.success .dialog-icon {
    background-color: #52c41a;
  }
  
  .dialog.error .dialog-icon {
    background-color: #f5222d;
  }
  
  .dialog.info .dialog-icon {
    background-color: #1890ff;
  }
  
  .dialog-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .dialog-icon i {
    color: white;
    font-size: 32px;
    font-style: normal;
    font-weight: bold;
  }
  
  .dialog-title {
    font-size: 18px;
    margin: 0 0 8px 0;
    color: #333;
  }
  
  .dialog-message {
    font-size: 14px;
    margin: 0 0 20px 0;
    color: #666;
  }
  
  .dialog-btn {
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .dialog-btn:hover {
    background-color: #40a9ff;
  }
  
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
  }
  
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
`;
document.head.appendChild(style);

// 创建一个弹窗服务
const Dialog = {
  // 显示信息弹窗
  info(message, title = '提示') {
    return this._show({ message, title, type: 'info' });
  },
  
  // 显示成功弹窗
  success(message, title = '成功') {
    return this._show({ message, title, type: 'success' });
  },
  
  // 显示错误弹窗
  error(message, title = '错误') {
    return this._show({ message, title, type: 'error' });
  },
  
  // 内部方法，创建并显示弹窗
  _show(options = {}) {
    const instance = new DialogComponent({
      el: document.createElement('div')
    });
    document.body.appendChild(instance.$el);
    return instance.show(options);
  }
};

export default Dialog; 